<template>
  <div class="container">
    <div class="tabs">
      <ul>
        <li :class="{'is-active':Itemtype === 'all'}"><a @click.prevent="changeLiebiao('all')">全部事项({{todos.length}})</a></li>
        <li :class="{'is-active':Itemtype === 'unisok'}"><a @click.prevent="changeLiebiao('unisok')">未完成事项({{Unisok.length}})</a></li>
        <li :class="{'is-active':Itemtype === 'isiok'}"><a @click.prevent="changeLiebiao('isiok')">已完成事项({{Isok.length}})</a></li>
      </ul>
    </div>
    <div v-if="todos.length===0">
      待办事项列表为空
    </div>
      <div
       v-else
       class="columns is-multiline is-mobile">
       <div
        class="column is-one-quarter"
        v-for="todo in Itemliebiao"
        :key = todo.id>
        <TodoItem v-bind='todo' />
       </div>
    </div>
  </div>
</template>

<script>
import TodoItem from './TodolistItem'
export default {
  name: 'Todolistliebiao',
  components: {
    TodoItem
  },
  props:['todos'],
  data() {
    return {
      Itemliebiao:this.todos,
      Itemtype:'all'
    }
  },
  computed: {
      Unisok() {
        return this.todos.filter(item => !item.isok)
      },
      Isok() {
        return this.todos.filter(item => item.isok)
      }
  },
  methods: {
    changeLiebiao(type) {
      switch (type) {
        case 'all':
          this.Itemliebiao = this.todos
          break
        case 'unisok':
          this.Itemliebiao = this.Unisok
          break
        case 'isiok':
          this.Itemliebiao = this.Isok
          break
      }
      this.Itemtype = type
    }
  },
  watch: {
    todos() {
      this.changeLiebiao(this.Itemtype)
    }
  }
}
</script>

<style>

</style>
